<template>
  <div>
    <!-- 密码输入框 -->
    <van-password-input :value="value" :info="tips" @focus="showKeyboard = true" />
    <!-- 数字键盘 -->
    <van-number-keyboard
      :show="showKeyboard"
      theme="custom"
      extra-key="."
      close-button-text="完成"
      @blur="showKeyboard = false"
      @input="onInput"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { PasswordInput, NumberKeyboard, Toast } from 'vant'
Vue.use(PasswordInput).use(NumberKeyboard).use(Toast)

export default {
  data () {
    return {
      value: '11',
      tips: '密码为 6 位数字',
      showKeyboard: true
    }
  },
  methods: {
    onInput (key) {
      Toast(key)
      this.value = (this.value + key).slice(0, 6)
    },
    onDelete () {
      Toast('delete')
      this.value = this.value.slice(0, this.value.length - 1)
    }
  }
}
</script>
